<script setup lang="ts">
/**
 * axios axios 配置
 */
let axios: any = inject('$axios');

/**
 * 左侧选择
 */
const acitveClassValue = ref({});
const classList = ref([
  {
    name: '招聘/求职',
    type: 1,
  },
  {
    name: '房产',
    type: 2,
  },
  {
    name: '出售求购',
    type: 3,
  },
  {
    name: '转商/找商',
    type: 4,
  },
  {
    name: '售车购车',
    type: 5,
  },
  {
    name: '顺风车',
    type: 6,
  },
  {
    name: '寻找/认领',
    type: 7,
  },
  {
    name: '征婚',
    type: 8,
  },
]);
const getTableTagMet = async () => {
  let res = await axios.getTableTag({
    is_tag: 1
  });
  if (res.data.code != 200)
    return ElMessage({
      message: res.data.message,
      type: 'error',
    });
  classList.value = res.data.data;
  acitveClassValue.value = classList.value[0];
  loadingTable.value = true;
  setTimeout(() => {
    getTableList();
    loadingTable.value = false;
  }, 1000);
};
const handelChangeClass = (tab) => {
  console.log(tab);
  let filterDate = classList.value.filter(
    (item) => item.name == tab.props.label,
  );
  acitveClassValue.value = filterDate[0];
  loadingTable.value = true;
  setTimeout(() => {
    getTableList();
    loadingTable.value = false;
  }, 1000);
};

/**
 * 右侧表格
 * handleAddMate 添加标签
 */
const loadingTable = ref(false);
const tableRef = ref(null);
const tableData = ref([]);
const getTableList = () => {
  let arr = [];
  if (acitveClassValue.value.children.length) {
    acitveClassValue.value.children.forEach((item) => {
      item.twoName = item.name;
      arr.push(item);
      if (item.children.length) {
        item.children.forEach((itemChild) => {
          itemChild.threeName = itemChild.name;
          itemChild.threeNum = itemChild.num;
          itemChild.threeNumIf = true;
          arr.push(itemChild);
        });
      }
    });
  }
  tableData.value = arr;
  console.log(tableData.value)
};

/**
 * 添加标签
 *
 */
const handleAddMate = (scope) => {
  let check = true;
  ElMessageBox.prompt('标签名称', '添加标签', {
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '请输入标签名称',
    inputPlaceholder: '请输入标签名称',
    beforeClose: async (action, instance, done) => {
      if (action == 'confirm') {
        if (!check) return;
        check = false;
        let res = await axios.getTableTagUpdate({
          name: instance.inputValue,
          parent_id: scope.row.id,
          style: 2,
        });
        check = true;
        if (res.data.code != 200)
          return ElMessage({
            message: res.data.message,
            type: 'error',
          });
        ElMessage({
          message: '操作成功',
          type: 'success',
        });
        getTableTagMet();
        done();
      } else {
        //点击取消关闭
        done();
      }
    },
  });
};

/**
 * 查看标签
 */
const dialogMetaOpitons = reactive({
  dialogShow: false,
  title: '查看标签',
  width: '50%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '取 消',
      btnLoading: false,
      btnLoadingText: '',
    },
    success: {
      type: 'success',
      buttonType: 'primary',
      btnText: '确认',
      btnLoading: false,
      btnLoadingText: '提交中',
    },
  },
});
const watchLabelList = ref();
const watchDate = ref();
const watchFlag = ref(false);
const handleWatchMate = async (scope) => {
  if (scope.row.threeNum <= 0) {
    return ElMessage({
      message: '请添加标签后查看',
      type: 'warning',
    });
  }
  watchDate.value = scope;
  watchFlag.value = false;
  let res = await axios.getTableTagItem({
    id: scope.row.id,
    style: 1
  });
  if (res.data.code != 200)
    return ElMessage({
      message: res.data.message,
      type: 'error',
    });
  watchLabelList.value = res.data.data;
  dialogMetaOpitons.dialogShow = true;
};
const handelDialogMetaButton = () => {
  if (watchFlag.value) getTableTagMet();
  dialogMetaOpitons.dialogShow = false;
};

/**
 * 删除标签
 */
const handelTagDel = (tag) => {
  ElMessageBox.confirm('确认要删除吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: async (action, instance, done) => {
      if (action == 'confirm') {
        // 点击确认请求接口
        let res: any = await axios.getTableTagDelete({
          id: tag.id,
        });
        if (res.data.code != 200)
          return ElMessage({
            message: res.data.message,
            type: 'error',
          });
        handleWatchMate(watchDate.value);
        watchFlag.value = true;
        ElMessage({ type: 'success', message: `操作成功` });
        done();
      } else {
        //点击取消关闭
        done();
      }
    },
  });
};

// 更新表格布局
onBeforeUpdate(() => {
  nextTick(() => {
    tableRef.value?.doLayout();
  });
});

// 初始化入口
const init = () => {
  getTableTagMet();
};
init();
</script>
<template>
  <div class="mate">
    <el-tabs type="border-card" @tab-click="handelChangeClass">
      <el-tab-pane :label="item.name" v-for="(item, index) in classList" :key="index">
        <el-table ref="tableRef" :data="tableData" empty-text="暂无数据" border height="600" v-loading="loadingTable"
          :headerCellStyle="{
      background: '#e9f2fa',
      fontSize: '15px',
    }">
          <el-table-column prop="twoName" label="行业" align="center" v-if="acitveClassValue.id == 1"></el-table-column>
          <el-table-column prop="threeName" label="岗位" align="center" v-if="acitveClassValue.id == 1"></el-table-column>
          <el-table-column prop="twoName" label="业务类型" align="center" v-if="acitveClassValue.id != 1"></el-table-column>
          <el-table-column prop="threeName" label="房屋类型" align="center"
            v-if="acitveClassValue.id == 2"></el-table-column>
          <el-table-column prop="threeName" label="类别" align="center" v-if="acitveClassValue.id == 3 ||
      acitveClassValue.id == 4 ||
      acitveClassValue.id == 5 ||
      acitveClassValue.id == 6
      "></el-table-column>
          <el-table-column prop="threeNum" label="标签" align="center"></el-table-column>
          <el-table-column prop="do" label="操作" align="center">
            <template #default="scope">
              <p v-if="scope.row.threeNumIf">
                <el-button type="primary" text @click="handleWatchMate(scope)">
                  查看标签
                </el-button>
                <el-button type="primary" text @click="handleAddMate(scope)">
                  添加标签
                </el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 查看标签 弹窗 -->
    <Dialog :dialog-object="dialogMetaOpitons" @handelDialogButton="handelDialogMetaButton">
      <template v-slot:dialogContaint>
        <div class="label_box">
          <div class="label_scroll">
            <div class="label_list" v-for="(tag, index) in watchLabelList" :key="index">
              {{ tag.name }}
              <span class="delIcon" @click="handelTagDel(tag)"></span>
            </div>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<style scoped lang="scss">
.mate {
  width: 100%;
  height: 100%;
  overflow: hidden;

  ::v-deep .el-tabs__content {
    height: 800px;
  }

  ::v-deep .el-tabs__item {
    height: 55px;
  }

  .mate_containt {
    width: calc(100% - 60px);
    height: 97%;

    padding: 60px 30px 50px 30px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .meta_left {
      width: 220px;
      height: 100%;
      border-radius: 2px;
      border: 1px solid;
      overflow-y: scroll;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 0;
      }

      .meta_left_list {
        height: 82px;
        width: 220px;
        text-align: center;
        line-height: 82px;
        font-size: 16px;
        border-bottom: 1px solid #d7d7d7;
        cursor: pointer;

        &:hover {
          background: #e4e2e2;
        }
      }

      .active_meta_left {
        background: #409eff !important;
        color: #ffffff !important;
      }
    }

    .meta_right {
      width: calc(100% - 240px);
      margin-left: 20px;
      height: 100%;

      .el-table {
        height: 100%;
      }
    }
  }

  ::v-deep .cell {
    height: 42px;
    line-height: 30px;
  }

  .label_box {
    width: 100%;
    max-height: 376px;

    .label_scroll {
      height: calc(100% - 27px);
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0 10px 10px;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        //隐藏或取消滚动条
        display: none;
      }

      .label_list {
        width: 142px;
        height: 40px;
        border: 1px solid;
        border-radius: 7px;
        text-align: center;
        line-height: 40px;
        margin-right: 20px;
        margin-bottom: 20px;
        position: relative;

        .delIcon {
          position: absolute;
          width: 18px;
          height: 18px;
          right: -5px;
          top: -8px;
          cursor: pointer;
        }

        .delIcon::before,
        .delIcon::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 60%;
          height: 6px;
          background: #da011b;
          transform: translate(-50%, -50%) rotate(45deg);
        }

        .delIcon::after {
          transform: translate(-50%, -50%) rotate(-45deg);
        }

        .delIcon::before {
          transform: translate(-50%, -50%) rotate(45deg) scaleX(2);
          transform-origin: center center;
        }

        .delIcon::after {
          transform: translate(-50%, -50%) rotate(-45deg) scaleX(2);
          transform-origin: center center;
        }
      }
    }
  }
}
</style>
